<template>
  <view class="page-main">
    <slide-questions
      v-if="flag"
      :dataList="list"
      title="测试题库名称"
      @submit="subData"
    >
      <!--      <template #test>-->

      <!--      </template>-->
    </slide-questions>
    <div v-else style="padding: 30rpx">
      <!--      <div class="f ac xb" @click="choosePosition"> 选择目的-->
      <!--        <u&#45;&#45;input-->
      <!--            v-model="value"-->
      <!--            :readonly="true" border="none" inputAlign="right"-->
      <!--            placeholder="请选择目的"-->
      <!--            suffixIcon="edit-pen"-->
      <!--            @click="choosePosition"-->
      <!--        ></u&#45;&#45;input>-->
      <!--      </div>-->
      <div v-for="(i, z) in dataList" :key="z">
        <view class="f ac xb mt20r">
          <view
            class="title f ac xb rds20r"
            style="background-color: #f4f1f4; color: #a385a1; padding: 0 10rpx"
            @click="
              () => {
                (actIndex = z), choosePosition();
              }
            "
          >
            <div
              class="rds50"
              style="
                width: 15rpx;
                height: 15rpx;
                background-color: #a385a1;
                margin-right: 20rpx;
              "
            ></div>
            <div>{{ i.md }}</div>
          </view>
        </view>
        <div v-if="i.arr.length > 0">
          <view
            v-for="(item, i) in i.arr"
            :key="i"
            class="f ac xb mt30r plan chooseitem mt20r"
            @click="edit(item, i, z)"
          >
            <view>{{ item.dz }}</view>
            <view class="f ac">
              <div>{{ item.zs }} 组 X</div>
              <div style="border-right: 1px solid; padding-right: 20rpx">
                {{ item.cs }}{{ item.dw1 }}
              </div>
              <div class="ml20r">{{ item.zl }}{{ item.dw2 }}</div>
            </view>
          </view>
        </div>
        <div
          v-if="i.arr.length == 0"
          class="f ac xc mt30r plan chooseitem mt20r"
        >
          暂无动作
        </div>
      </div>
      <div
        class="w100 f ac xc mt50r"
        style="padding: 0 10vw; box-sizing: border-box"
        v-if="isShare"
      >
        <view class="tc btn mr20r" style="width: 90%" @click="addData">
          使用模板
        </view>
      </div>
    </div>
    <u-popup :show="show2" @close="reset" round>
      <view style="padding: 30rpx">
        <div
          class="plan chooseitem mt20r"
          style="align-items: unset; display: block"
        >
          <div>
            <div class="f ac mb20r w100">
              名称：
              <input
                v-model="form.dz"
                placeholder="请输入动作名称"
                style="
                  border-radius: 0.125rem;
                  height: 30rpx;
                  width: 229rpx;
                  padding-left: 10rpx;
                "
              />
            </div>
          </div>
          <div class="f ac">
            <div>
              <input
                type="number"
                v-model="form.zs"
                style="
                  border-radius: 0.125rem;
                  height: 30rpx;
                  width: 59rpx;
                  padding-left: 10rpx;
                  border: 1px solid #e0e0e0;
                "
              />
            </div>
            组
            <div class="ml10r">
              <input
                type="number"
                v-model="form.cs"
                style="
                  border-radius: 0.125rem;
                  height: 30rpx;
                  width: 59rpx;
                  padding-left: 10rpx;
                  border: 1px solid #e0e0e0;
                "
              />
            </div>
            <div>
              <span>{{ form.dw1 }}</span>
            </div>
            <image
              src="/static/svg/change.svg"
              style="width: 40rpx; height: 40rpx"
              @click="change"
            />
            <div class="ml50r">
              <input
                type="number"
                v-model="form.zl"
                placeholder="请输入重量"
                style="
                  border-radius: 0.125rem;
                  height: 30rpx;
                  width: 200rpx;
                  padding-left: 10rpx;
                  border: 1px solid #e0e0e0;
                "
              />
            </div>
            <div>
              <span>{{ form.dw2 }}</span>
            </div>
            <image
              src="/static/svg/change.svg"
              style="width: 40rpx; height: 40rpx"
              @click="change2"
            />
          </div>
        </div>
        <div class="f ac xb mt30r">
          <u-button
            type="primary"
            :plain="true"
            @click="reset"
            text="重置"
          ></u-button>
          <div style="width: 30rpx"></div>
          <u-button type="primary" @click="adddz" text="确定"></u-button>
        </div>
      </view>
    </u-popup>
    <u-popup :show="show" @close="show = false">
      <view style="padding: 30rpx">
        <view
          v-for="(item, index) in mdList"
          :key="index"
          class="chooseitem mb20r f ac xb"
          @click="selId = item.id"
        >
          <view v-if="!item.slot" class="bodyr f ac">
            <!--                      <div class="mr20r" style="background: #00C853;width: 100rpx;height: 100rpx;"></div>-->
            {{ item.title }}
          </view>
          <view v-else>
            <div class="f ac">
              自定义：
              <input v-model="answer" type="text" />
            </div>
          </view>
          <image
            v-if="selId == item.id"
            class="sinchoose-on"
            mode=""
            src="/static/chooseon.png"
          ></image>
          <view v-else class="sinchoose"></view>
        </view>
        <u-button text="确定" type="primary" @click="submit"></u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import slideQuestions from "@/components/slideQuestions/index.vue";
import { getLocalStorage } from "@/utils/api";

export default {
  components: {
    slideQuestions,
  },
  data() {
    return {
      isShare:false,//是否从分享进来
      dataList: [
        {
          md: "热身激活", //目的
          arr: [
            {
              dz: "哑铃负重踩箱",
              zs: "2", //组数
              cs: "3", //次数
              zl: "4", //重量,
              dw1: "分", // 存储当前选中的单位索引
              dw2: "磅", // 存储当前选中的单位索引
            },
            {
              dz: "哑铃负重踩箱",
              zs: "", //组数
              cs: "", //次数
              zl: "", //重量,
              dw1: "分", // 存储当前选中的单位索引
              dw2: "磅", // 存储当前选中的单位索引
            },
          ],
        },
        {
          md: "正式训练", //目的
          arr: [],
        },
        {
          md: "放松拉伸", //目的
          arr: [],
        },
      ],
      actIndex: 0,
      index: 0,
      index2: 0,
      form: {
        dz: "", //动作名称
        zs: "", //组数
        cs: "", //次数
        zl: "", //重量,
        dw1: "分", // 存储当前选中的单位索引
        dw2: "磅", // 存储当前选中的单位索引
      },
      show: false,
      show1: false,
      show2: false,
      value: "",
      flag: false,
      mdList: [
        { id: 1, title: "热身" },
        { id: 2, title: "正式训练" },
        { id: 3, title: "放松拉伸" },
        { id: 4, title: "一般活动GPP" },
        { id: 5, title: "多次数RP" },
        { id: 6, title: "肌力ME" },
        { id: 7, title: "爆发DE" },
        { id: 8, title: "自定义", slot: true },
      ],
      answer: "",
      selId: 0,
      list: [
        {
          id: "1",
          title: "请选择主项运动",
          problemType: "SINGLE",
          score: 5, //分值
          children: [
            {
              alias: "A",
              answer: "传统动作",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "B",
              answer: "变式动作",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "C",
              answer: "结构动作",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "D",
              answer: "自定义动作",
              slot: true,
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "E",
              answer: "跳过",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
          ],
        },
        {
          id: "2",
          title: "请选择重点部位",
          problemType: "SINGLE",
          score: 5, //分值
          children: [
            {
              alias: "A",
              answer: "上肢",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "B",
              answer: "下肢",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "C",
              answer: "全身",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "D",
              answer: "自定义动作",
              slot: true,
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
          ],
        },
        {
          id: "3",
          title: "请选择运动目的",
          problemType: "SINGLE",
          score: 5, //分值
          children: [
            {
              alias: "A",
              answer: "肌力",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "B",
              answer: "爆发力",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
            {
              alias: "C",
              answer: "体能",
              isSelect: 0, //这个是用来回显的字段(0:未选中；1:选中)(可不传)
            },
          ],
        },
        {
          id: "4",
          score: 10, //分值
          title: "课程名称",
          problemType: "QUESTION",
          userAnswer: getLocalStorage("templateName"), //这个是用来回显的字段(可不传)
        },
        // {
        //   id: '5',
        //   slot: 'test',
        // },
      ], //问题列表数据
      editIndex: "",
    };
  },
  methods: {
    //点击提交
    subData(data) {
      console.log("提交的数据：" + JSON.stringify(data));
      this.flag = false;
      // uni.navigateTo({
      //   url: '/pages/authentication/result'
      // })
    },
    choosePosition() {
      console.log("//////");
      this.show = true;
    },
    change() {
      console.log("change");
      let arr = ["分", "秒", "次"];
      this.index += 1;
      if (this.index > 2) {
        this.index = 0;
      }

      this.form.dw1 = arr[this.index];
    },
    change2() {
      let arr = ["磅", "RM", "KG"];
      this.index2 += 1;
      if (this.index2 > 2) {
        this.index2 = 0;
      }
      this.form.dw2 = arr[this.index2];
    },
    submit() {
      this.show = false;
      // 拿到selId==item.id mdList这个item
      this.mdList.find((item) => {
        if (item.id === 8) {
          this.dataList[this.actIndex].md = this.answer;
        } else if (item.id === this.selId) {
          this.dataList[this.actIndex].md = item.title;
        }
      });
    },
    add(i) {
      this.show1 = true;
    },
    addmd() {
      this.dataList.push({
        md: "自定义", //目的
        arr: [],
      });
    },

    addData(){

    },
    adddz() {
      this.show2 = false;
      if (this.editIndex !== "") {
        this.dataList[this.actIndex].arr[this.editIndex] = this.form;
        return;
      } else {
        this.dataList[this.actIndex].arr.push(this.form);
      }
    },
    confirm() {
      this.show1 = false;
    },
    edit(item, i, z) {
      this.actIndex = z;
      this.editIndex = i;
      this.form = item;
      this.show2 = true;
    },
    reset() {
      this.show2 = true;
      this.editIndex = "";
      this.form = {
        dz: "", //动作名称
        zs: "", //组数
        cs: "", //次数
        zl: "", //重量,
        dw1: "分", // 存储当前选中的单位索引
        dw2: "磅", // 存储当前选中的单位索引
      };
    },
  },
};
</script>
<style>
.chooseitem {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 1px solid #ebebeb;
  border-radius: 20rpx;
}

.sinchoose {
  width: 28rpx;
  height: 28rpx;
  margin-right: 16rpx;
  border-radius: 50%;
  background: #ffffff;
  border: 2rpx solid #bfbdbd;
}

.sinchoose2 {
  border-radius: 6rpx;
}

.sinchoose-on {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}
.btn {
  padding: 30rpx;
  background: #000;
  color: #fff;
  border-radius: 30rpx;
}
</style>
